<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8" />
  <meta name="description" content="HyperSynapse Network 用户账号管理" />
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
  <title>账号管理 - HyperSynapse Phira</title>
  <style>
    html, body {
      margin: 0;
      padding: 0;
      font-family: 'Segoe UI', sans-serif;
      background: #000;
      color: #eee;
      overflow-x: hidden;
      scroll-behavior: smooth;
    }
    .parallax-bg {
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), 
                        url('https://webstatic.cn-nb1.rains3.com/5712%C3%973360.jpeg');
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      z-index: 0;
    }
    header {
      position: fixed;
      top: 0;
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0.5rem 1.5rem;
      backdrop-filter: blur(12px);
      background: rgba(0, 0, 0, 0.4);
      z-index: 1000;
      box-sizing: border-box;
    }
    .logo-nav-container {
      display: flex;
      align-items: center;
      flex: 1;
    }
    #logo-img {
      height: 32px;
      margin-right: 1.2rem;
    }
    .nav-links {
      display: flex;
    }
    .nav-links a {
      color: #eee;
      margin-right: 1.2rem;
      text-decoration: none;
      transition: 0.3s;
      font-size: 0.95rem;
    }
    .nav-links a:hover {
      color: #fff;
      text-shadow: 0 0 4px #fff;
    }
    .user-section {
      display: flex;
      justify-content: flex-end;
      flex: 1;
    }
    .glass-button {
      display: flex;
      align-items: center;
      padding: 0.4rem 1rem;
      background: rgba(255, 255, 255, 0.1);
      backdrop-filter: blur(10px);
      border-radius: 999px;
      border: 1px solid rgba(255, 255, 255, 0.2);
      cursor: pointer;
      transition: all 0.3s ease;
      min-width: 100px;
    }
    .glass-button:hover {
      background: rgba(255, 255, 255, 0.15);
      transform: scale(1.05);
    }
    .login-btn {
      color: #eee;
      text-decoration: none;
      font-size: 0.95rem;
      white-space: nowrap;
      width: 100%;
      text-align: center;
    }
    .user-info {
      display: flex;
      align-items: center;
      position: relative;
      cursor: pointer;
      width: 100%;
    }
    .username {
      margin-right: 0.8rem;
      font-size: 0.95rem;
      color: #eee;
      max-width: 120px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .user-avatar {
      width: 30px;
      height: 30px;
      border-radius: 50%;
      object-fit: cover;
      border: 1px solid rgba(255, 255, 255, 0.3);
    }
    .dropdown-content {
      position: absolute;
      top: 100%;
      right: 0;
      background: rgba(0, 0, 0, 0.7);
      backdrop-filter: blur(12px);
      border-radius: 8px;
      padding: 0.8rem;
      min-width: 160px;
      box-shadow: 0 4px 16px rgba(0,0,0,0.5);
      z-index: 1001;
      opacity: 0;
      visibility: hidden;
      transform: translateY(10px);
      transition: all 0.3s ease;
      border: 1px solid rgba(255, 255, 255, 0.1);
    }
    .dropdown-content.show {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
    }
    .dropdown-content span {
      display: block;
      padding: 0.3rem 0.5rem;
      font-weight: bold;
      color: #a1e5ef;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
      margin-bottom: 0.5rem;
    }
    .dropdown-content a {
      display: block;
      padding: 0.5rem;
      color: #eee;
      text-decoration: none;
      border-radius: 4px;
      transition: all 0.3s ease;
    }
    .dropdown-content a:hover {
      background: rgba(255, 255, 255, 0.1);
      color: #fff;
    }
    main {
      position: relative;
      z-index: 2;
      padding-top: 100px;
      display: flex;
      flex-direction: column;
      align-items: center;
      min-height: 100vh;
      padding-bottom: 50px;
    }
    
    /* 新增3D卡片效果 */
    .account-container {
      transform-style: preserve-3d;
      transform: translateZ(20px);
      transition: transform 0.3s ease;
      animation: gentleSway 8s infinite ease-in-out;
      width: 95%;
      max-width: 800px;
      background: rgba(255, 255, 255, 0.05);
      border-radius: 16px;
      backdrop-filter: blur(12px);
      padding: 2rem;
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
      border: 1px solid rgba(255, 255, 255, 0.2);
      margin: 1rem;
    }

    @keyframes gentleSway {
      0%, 100% { transform: translateZ(20px) rotateX(0.5deg) rotateY(0.5deg); }
      25% { transform: translateZ(20px) rotateX(-0.5deg) rotateY(-1deg); }
      50% { transform: translateZ(20px) rotateX(0.5deg) rotateY(1deg); }
      75% { transform: translateZ(20px) rotateX(-0.5deg) rotateY(0.5deg); }
    }

    .account-container.tilting {
      animation: none;
      transition: transform 0.1s linear;
    }
    
    .account-header {
      display: flex;
      align-items: center;
      margin-bottom: 2rem;
      padding-bottom: 1.5rem;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }
    .account-avatar {
      width: 100px;
      height: 100px;
      border-radius: 50%;
      object-fit: cover;
      border: 1px solid rgba(255, 255, 255, 0.2);
      margin-right: 1.5rem;
      background: rgba(0, 0, 0, 0.3);
    }
    .account-info {
      flex: 1;
    }
    .account-name {
      font-size: 1.8rem;
      margin-bottom: 0.5rem;
      color: #fff;
    }
    .account-subtitle {
      color: #aaa;
      margin-bottom: 0.3rem;
      font-size: 1rem;
    }
    .account-stats {
      display: flex;
      margin-top: 1rem;
      gap: 1.5rem;
    }
    .stat-item {
      text-align: center;
    }
    .stat-value {
      font-size: 1.5rem;
      color: #a1e5ef;
      font-weight: bold;
    }
    .stat-label {
      font-size: 0.9rem;
      color: #aaa;
    }
    .form-section {
      margin-bottom: 2rem;
    }
    .section-title {
      font-size: 1.3rem;
      margin-bottom: 1.2rem;
      color: #a1e5ef;
      position: relative;
      padding-left: 1rem;
    }
    .section-title::before {
      content: "";
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      height: 70%;
      width: 4px;
      background: #a1e5ef;
      border-radius: 4px;
    }
    .form-group {
      margin-bottom: 1.5rem;
    }
    .form-label {
      display: block;
      margin-bottom: 0.5rem;
      color: #ddd;
    }
    .form-input {
      width: 100%;
      padding: 0.8rem 1rem;
      background: rgba(255, 255, 255, 0.08);
      border: 1px solid rgba(255, 255, 255, 0.2);
      border-radius: 8px;
      color: #fff;
      font-size: 1rem;
      outline: none;
      transition: all 0.3s ease;
    }
    .form-input:focus {
      border-color: rgba(255, 255, 255, 0.4);
      box-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
    }
    .form-row {
      display: flex;
      gap: 1.5rem;
      margin-bottom: 1.5rem;
    }
    .form-col {
      flex: 1;
    }
    .badge {
      display: inline-block;
      padding: 0.3rem 0.8rem;
      border-radius: 999px;
      font-size: 0.85rem;
      margin-right: 0.5rem;
      background: rgba(255, 255, 255, 0.1);
      backdrop-filter: blur(6px);
      border: 1px solid rgba(255, 255, 255, 0.2);
    }
    .badge-admin {
      background: rgba(255, 153, 0, 0.2);
      color: #ff9900;
    }
    .badge-dev {
      background: rgba(0, 204, 255, 0.2);
      color: #00ccff;
    }
    .btn {
      padding: 0.8rem 1.5rem;
      border-radius: 8px;
      border: none;
      font-size: 1rem;
      cursor: pointer;
      transition: all 0.3s ease;
      background: rgba(255, 255, 255, 0.1);
      backdrop-filter: blur(10px);
      color: white;
      font-weight: 500;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 0.5rem;
      border: 1px solid rgba(255, 255, 255, 0.2);
    }
    .btn:hover {
      background: rgba(255, 255, 255, 0.15);
      transform: translateY(-2px);
    }
    .btn-outline {
      background: transparent;
      border: 1px solid rgba(255, 255, 255, 0.2);
      color: #ddd;
    }
    .btn-outline:hover {
      background: rgba(255, 255, 255, 0.1);
    }
    .btn-container {
      display: flex;
      gap: 1rem;
      margin-top: 1rem;
    }
    .info-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
      gap: 1.5rem;
      margin-top: 1rem;
    }
    .info-card {
      background: rgba(255, 255, 255, 0.05);
      border-radius: 12px;
      padding: 1.2rem;
      border: 1px solid rgba(255, 255, 255, 0.1);
      backdrop-filter: blur(6px);
    }
    .info-title {
      color: #aaa;
      font-size: 0.9rem;
      margin-bottom: 0.5rem;
    }
    .info-value {
      font-size: 1.1rem;
      color: #fff;
      word-break: break-all;
    }
    .status-indicator {
      display: inline-block;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      margin-right: 0.5rem;
    }
    .status-active {
      background: #0f0;
      box-shadow: 0 0 8px #0f0;
    }
    .status-inactive {
      background: #f33;
    }
    .message {
      padding: 0.8rem;
      border-radius: 8px;
      margin: 1rem 0;
      text-align: center;
      display: none;
      backdrop-filter: blur(6px);
      border: 1px solid rgba(255, 255, 255, 0.1);
    }
    .message-success {
      background: rgba(0, 200, 0, 0.2);
      color: #0f0;
    }
    .message-error {
      background: rgba(200, 0, 0, 0.2);
      color: #f33;
    }
    .form-actions {
      display: flex;
      justify-content: flex-end;
      gap: 1rem;
      margin-top: 1rem;
    }
    @media (max-width: 768px) {
      header {
        padding: 0.5rem 1rem;
        flex-wrap: wrap;
      }
      .logo-nav-container {
        flex: 0 0 100%;
        margin-bottom: 0.5rem;
      }
      .user-section {
        flex: 0 0 100%;
        justify-content: flex-end;
      }
      .nav-links a {
        margin-right: 1rem;
      }
      .username {
        max-width: 80px;
      }
      .account-header {
        flex-direction: column;
        text-align: center;
      }
      .account-avatar {
        margin-right: 0;
        margin-bottom: 1rem;
      }
      .form-row {
        flex-direction: column;
        gap: 1rem;
      }
      .account-stats {
        justify-content: center;
      }
    }
  </style>
</head>
<body>
  <div class="parallax-bg"></div>
  <div id="header-container"></div>
  
  <main>
    <div class="account-container">
      <div class="account-header">
        <div class="account-avatar">
          <img id="user-avatar-large-img" src="" style="width:100%;height:100%;border-radius:50%;object-fit:cover;">
        </div>
        <div class="account-info">
          <h1 class="account-name" id="account-name">加载中...</h1>
          <p class="account-subtitle">用户ID: <span id="account-id">-</span></p>
          <p class="account-subtitle">Phira ID: <span id="phira-id">-</span></p>
          <div class="account-badges" id="account-badges"></div>
        </div>
        <div class="account-stats">
          <div class="stat-item">
            <div class="stat-value" id="rks-value">0.00</div>
            <div class="stat-label">RKS</div>
          </div>
          <div class="stat-item">
            <div class="stat-value" id="join-date">-</div>
            <div class="stat-label">注册日期</div>
          </div>
          <div class="stat-item">
            <div class="stat-value">
              <span class="status-indicator status-active"></span>
              <span>在线</span>
            </div>
            <div class="stat-label">状态</div>
          </div>
        </div>
      </div>
      
      <div class="form-section">
        <h2 class="section-title">账户信息</h2>
        
        <div class="info-grid">
          <div class="info-card">
            <div class="info-title">用户名</div>
            <div class="info-value" id="info-username">-</div>
          </div>
          <div class="info-card">
            <div class="info-title">Phira 用户名</div>
            <div class="info-value" id="phira-name">-</div>
          </div>
          <div class="info-card">
            <div class="info-title">账户状态</div>
            <div class="info-value">激活 <span class="status-indicator status-active"></span></div>
          </div>
          <div class="info-card">
            <div class="info-title">最后登录</div>
            <div class="info-value" id="last-login">-</div>
          </div>
        </div>
      </div>
      
      <div class="form-section">
        <h2 class="section-title">修改用户名</h2>
        
        <div id="username-message" class="message"></div>
        
        <div class="form-group">
          <label class="form-label">新用户名</label>
          <input type="text" class="form-input" id="new-username" placeholder="输入新的用户名">
        </div>
        
        <div class="form-group">
          <label class="form-label">当前密码</label>
          <input type="password" class="form-input" id="username-password" placeholder="输入当前密码以确认">
        </div>
        
        <div class="form-actions">
          <button class="btn btn-outline" onclick="resetUsernameForm()">重置</button>
          <button class="btn" onclick="updateUsername()">更新用户名</button>
        </div>
      </div>
      
      <div class="form-section">
        <h2 class="section-title">修改密码</h2>
        
        <div id="password-message" class="message"></div>
        
        <div class="form-row">
          <div class="form-col">
            <div class="form-group">
              <label class="form-label">当前密码</label>
              <input type="password" class="form-input" id="current-password" placeholder="输入当前密码">
            </div>
          </div>
          <div class="form-col">
            <div class="form-group">
              <label class="form-label">新密码</label>
              <input type="password" class="form-input" id="new-password" placeholder="输入新密码">
            </div>
          </div>
        </div>
        
        <div class="form-group">
          <label class="form-label">确认新密码</label>
          <input type="password" class="form-input" id="confirm-password" placeholder="再次输入新密码">
        </div>
        
        <div class="form-actions">
          <button class="btn btn-outline" onclick="resetPasswordForm()">重置</button>
          <button class="btn" onclick="updatePassword()">更新密码</button>
        </div>
      </div>
      
      <div class="form-section">
        <h2 class="section-title">权限信息</h2>
        
        <div class="info-grid" id="permissions-grid">
          <div class="info-card">
            <div class="info-title">管理员状态</div>
            <div class="info-value">
              <span id="admin-status">否</span>
            </div>
          </div>
          <div class="info-card">
            <div class="info-title">开发者权限</div>
            <div class="info-value">
              <span id="dev-status">否</span>
            </div>
          </div>
        </div>
        
        <div class="form-group">
          <p style="color: #aaa; margin-top: 1.5rem;">
            注意：权限状态由系统管理员设置，普通用户无法自行修改。
            如需权限变更，请联系系统管理员。
          </p>
        </div>
      </div>
    </div>
  </main>

  <!-- 登录注册弹窗 -->
  <div id="auth-modal" class="modal" style="z-index: 99999; display: none;">
    <div class="modal-content glass-card" id="auth-box">
      <h3 id="auth-title">用户登录</h3>
      <input id="auth-name" placeholder="用户名" />
      <input id="auth-password" type="password" placeholder="密码" />
      <input id="auth-phiraid" class="collapsed" placeholder="Phira ID (仅注册)"/>
      <button onclick="submitAuth()">确认</button>
      <p id="auth-msg" style="margin-top:0.5rem;font-size:0.8rem;color:#ffccaa;"></p>
      <button onclick="toggleAuthMode()" style="margin-top:1rem">切换登录 / 注册</button>
      <button class="btn btn-outline" onclick="closeAuth()">关闭</button>
    </div>
  </div>

  <style>
    .modal {
      position: fixed;
      top: 0; left: 0;
      width: 100vw; height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
      background: rgba(0,0,0,0.5);
      backdrop-filter: blur(6px);
      z-index: 99999;
    }
    .modal-content {
      background: rgba(255,255,255,0.08);
      padding: 1.5rem;
      border-radius: 16px;
      color: #fff;
      backdrop-filter: blur(20px);
      max-width: 320px;
      width: 90%;
      border: 1px solid rgba(255,255,255,0.2);
    }
    .modal-content h3 {
      margin-top: 0;
      margin-bottom: 1rem;
      color: #a1e5ef;
    }
    .modal-content input {
      box-sizing: border-box;
      display: block;
      margin: 0.5rem 0;
      padding: 0.8rem;
      width: 100%;
      border: none;
      border-radius: 8px;
      background: rgba(255,255,255,0.1);
      color: #fff;
      backdrop-filter: blur(8px);
      font-size: 0.95rem;
      outline: none;
      transition: all 0.3s ease;
    }
    .modal-content input:focus {
      box-shadow: 0 0 0.5rem rgba(255, 255, 255, 0.3);
      border: 1px solid rgba(255, 255, 255, 0.4);
    }
    .modal-content button {
      width: 100%;
      margin: 0.5rem 0;
      padding: 0.8rem;
      font-size: 1rem;
      border-radius: 8px;
      border: none;
      background: rgba(255,255,255,0.1);
      color: #fff;
      backdrop-filter: blur(12px);
      cursor: pointer;
      transition: all 0.3s ease;
      border: 1px solid rgba(255, 255, 255, 0.2);
    }
    .modal-content button:hover {
      background: rgba(255,255,255,0.15);
      transform: translateY(-2px);
    }
  </style>

  <script>
    // 加载header组件
    fetch('header.html')
      .then(response => response.text())
      .then(html => {
        document.getElementById('header-container').innerHTML = html;
        // 页面特定的初始化代码
    });
    // 默认头像URL
    const DEFAULT_AVATAR = 'https://phira.moe/assets/user-6212ee95.png';
    let currentUser = null;
    let authMode = 'login';
    
    // 页面加载时检查登录状态
    document.addEventListener('DOMContentLoaded', () => {
      const savedUser = localStorage.getItem('user');
      if (savedUser) {
        currentUser = JSON.parse(savedUser);
        updateUserDisplay();
        loadAccountDetails();
      } else {
        // 未登录，重定向到登录页
        window.location.href = 'index.html';
      }
      
      // 添加3D卡片交互效果
      const accountContainer = document.querySelector('.account-container');
      
      if (accountContainer) {
        accountContainer.addEventListener('mousemove', (e) => {
          if (!accountContainer.classList.contains('tilting')) {
            accountContainer.classList.add('tilting');
          }
          
          const rect = accountContainer.getBoundingClientRect();
          const x = e.clientX - rect.left;
          const y = e.clientY - rect.top;
          const centerX = rect.width / 2;
          const centerY = rect.height / 2;
          
          const rotateY = (x - centerX) / centerX * 8;
          const rotateX = (centerY - y) / centerY * 8;
          
          accountContainer.style.transform = `translateZ(20px) rotateX(${rotateX}deg) rotateY(${rotateY}deg)`;
        });
        
        accountContainer.addEventListener('mouseleave', () => {
          accountContainer.classList.remove('tilting');
          accountContainer.style.transform = 'translateZ(20px) rotateX(0) rotateY(0)';
          
          // 重新启用轻微晃动动画
          setTimeout(() => {
            accountContainer.style.animation = 'gentleSway 8s infinite ease-in-out';
          }, 300);
        });
      }
    });
    
    // 加载账户详细信息
    function loadAccountDetails() {
      if (!currentUser) return;
      
      // 设置用户数据
      document.getElementById('account-name').textContent = currentUser.name;
      document.getElementById('username-display').textContent = currentUser.name;
      document.getElementById('dropdown-username').textContent = currentUser.name;
      document.getElementById('account-id').textContent = currentUser.id;
      document.getElementById('phira-id').textContent = currentUser.phira_id;
      document.getElementById('phira-name').textContent = currentUser.phira_name;
      document.getElementById('info-username').textContent = currentUser.name;
      document.getElementById('rks-value').textContent = currentUser.phira_rks ? parseFloat(currentUser.phira_rks).toFixed(2) : '0.00';
      
      // 设置头像
      const avatarUrl = currentUser.image_url || DEFAULT_AVATAR;
      document.getElementById('user-avatar').src = avatarUrl;
      document.getElementById('user-avatar-large-img').src = avatarUrl;
      
      // 设置注册日期（示例）
      const joinDate = new Date().toISOString().split('T')[0];
      document.getElementById('join-date').textContent = joinDate;
      
      // 设置最后登录时间
      document.getElementById('last-login').textContent = new Date().toLocaleString();
      
      // 设置权限信息
      document.getElementById('admin-status').textContent = currentUser.admin === "yes" ? "是" : "否";
      document.getElementById('dev-status').textContent = currentUser.dev === "yes" ? "是" : "否";
      
      // 设置Phira账户链接
      const phiraLink = document.getElementById('phira-profile-link');
      if (phiraLink && currentUser.phira_id) {
        phiraLink.href = `https://phira.moe/user/${currentUser.phira_id}`;
      }
      
      // 更新权限徽章
      const badgesContainer = document.getElementById('account-badges');
      badgesContainer.innerHTML = '';
      
      if (currentUser.admin === "yes") {
        const adminBadge = document.createElement('span');
        adminBadge.className = 'badge badge-admin';
        adminBadge.textContent = '管理员';
        badgesContainer.appendChild(adminBadge);
      }
      
      if (currentUser.dev === "yes") {
        const devBadge = document.createElement('span');
        devBadge.className = 'badge badge-dev';
        devBadge.textContent = '开发者';
        badgesContainer.appendChild(devBadge);
      }
    }
    
    // 更新用户显示区域
    function updateUserDisplay() {
      const loginButton = document.getElementById('login-button');
      const avatarContainer = document.getElementById('avatar-container');
      
      if (currentUser) {
        // 隐藏登录按钮
        loginButton.style.display = 'none';
        
        // 显示头像容器
        avatarContainer.style.display = 'flex';
        
        // 更新用户名和头像
        document.getElementById('username-display').textContent = currentUser.name;
        document.getElementById('user-avatar').src = currentUser.image_url || DEFAULT_AVATAR;
        document.getElementById('dropdown-username').textContent = currentUser.name;
      } else {
        // 显示登录按钮
        loginButton.style.display = 'flex';
        
        // 隐藏头像容器
        avatarContainer.style.display = 'none';
      }
    }
    
    // 切换下拉菜单显示状态
    function toggleDropdown() {
      const dropdown = document.getElementById('user-dropdown');
      if (dropdown) {
        dropdown.classList.toggle('show');
      }
    }
    
    // 退出登录
    function logout() {
      localStorage.removeItem('user');
      currentUser = null;
      window.location.href = 'index.html';
    }
    
    // 重置用户名表单
    function resetUsernameForm() {
      document.getElementById('new-username').value = '';
      document.getElementById('username-password').value = '';
      hideMessage('username-message');
    }
    
    // 重置密码表单
    function resetPasswordForm() {
      document.getElementById('current-password').value = '';
      document.getElementById('new-password').value = '';
      document.getElementById('confirm-password').value = '';
      hideMessage('password-message');
    }
    
    // 显示消息
    function showMessage(elementId, message, isSuccess) {
      const messageElement = document.getElementById(elementId);
      messageElement.textContent = message;
      messageElement.className = 'message ' + (isSuccess ? 'message-success' : 'message-error');
      messageElement.style.display = 'block';
      
      // 5秒后隐藏消息
      setTimeout(() => {
        hideMessage(elementId);
      }, 5000);
    }
    
    // 隐藏消息
    function hideMessage(elementId) {
      const messageElement = document.getElementById(elementId);
      messageElement.style.display = 'none';
    }
    
    // 更新用户名
    async function updateUsername() {
      const newUsername = document.getElementById('new-username').value;
      const password = document.getElementById('username-password').value;
      
      if (!newUsername) {
        showMessage('username-message', '请输入新的用户名', false);
        return;
      }
      
      if (!password) {
        showMessage('username-message', '请输入当前密码', false);
        return;
      }
      
      try {
        const response = await fetch('/usermgr/update_account', {
          method: 'POST',
          headers: {'Content-Type': 'application/json'},
          body: JSON.stringify({
            user_id: currentUser.id,
            current_password: password,
            new_username: newUsername
          })
        });
        
        const data = await response.json();
        
        if (data.status === 'success') {
          // 更新本地存储的用户信息
          currentUser.name = newUsername;
          localStorage.setItem('user', JSON.stringify(currentUser));
          
          // 更新页面显示
          document.getElementById('account-name').textContent = newUsername;
          document.getElementById('info-username').textContent = newUsername;
          document.getElementById('username-display').textContent = newUsername;
          document.getElementById('dropdown-username').textContent = newUsername;
          
          showMessage('username-message', '用户名更新成功！', true);
          resetUsernameForm();
        } else {
          showMessage('username-message', data.message || '更新失败', false);
        }
      } catch (error) {
        showMessage('username-message', '网络错误，请重试', false);
      }
    }
    
    // 更新密码
    async function updatePassword() {
      const currentPassword = document.getElementById('current-password').value;
      const newPassword = document.getElementById('new-password').value;
      const confirmPassword = document.getElementById('confirm-password').value;
      
      if (!currentPassword) {
        showMessage('password-message', '请输入当前密码', false);
        return;
      }
      
      if (!newPassword) {
        showMessage('password-message', '请输入新密码', false);
        return;
      }
      
      if (newPassword.length < 6) {
        showMessage('password-message', '密码长度至少为6个字符', false);
        return;
      }
      
      if (newPassword !== confirmPassword) {
        showMessage('password-message', '新密码与确认密码不匹配', false);
        return;
      }
      
      try {
        const response = await fetch('/usermgr/update_account', {
          method: 'POST',
          headers: {'Content-Type': 'application/json'},
          body: JSON.stringify({
            user_id: currentUser.id,
            current_password: currentPassword,
            new_password: newPassword
          })
        });
        
        const data = await response.json();
        
        if (data.status === 'success') {
          // 更新本地存储的用户信息（密码不存储在本地）
          showMessage('password-message', '密码更新成功！', true);
          resetPasswordForm();
        } else {
          showMessage('password-message', data.message || '更新失败', false);
        }
      } catch (error) {
        showMessage('password-message', '网络错误，请重试', false);
      }
    }
    
    // 以下是登录/注册相关功能
    function openAuth() {
      document.getElementById('auth-modal').style.display = 'flex';
      document.getElementById('auth-msg').textContent = '';
      updateAuthUI();
    }
    
    function closeAuth() {
      document.getElementById('auth-modal').style.display = 'none';
    }
    
    function toggleAuthMode() {
      authMode = authMode === 'login' ? 'register' : 'login';
      updateAuthUI();
    }
    
    function updateAuthUI() {
      var title = document.getElementById('auth-title');
      var phiraid = document.getElementById('auth-phiraid');
      if (authMode === 'login') {
        title.textContent = '用户登录';
        phiraid.classList.add('collapsed');
      }
      else {
        title.textContent = '用户注册';
        phiraid.classList.remove('collapsed');
      }
    }
    
    async function submitAuth() {
      const name = document.getElementById('auth-name').value;
      const password = document.getElementById('auth-password').value;
      const phira_id = document.getElementById('auth-phiraid').value;
      const msg = document.getElementById('auth-msg');
      msg.textContent = '处理中...';
    
      try {
        const res = await fetch(`/usermgr/${authMode}`, {
          method: 'POST',
          headers: {'Content-Type': 'application/json'},
          body: JSON.stringify(
            authMode === 'login' 
              ? { name, password } 
              : { name, password, phira_id }
          )
        });
        const data = await res.json();
        if (data.status === 'success') {
          // 保存用户信息到本地存储
          currentUser = data.user || { name };
          localStorage.setItem('user', JSON.stringify(currentUser));
          
          // 更新显示
          updateUserDisplay();
          loadAccountDetails();
          
          msg.textContent = '登录成功！';
          setTimeout(() => {
            closeAuth();
            msg.textContent = '';
          }, 1000);
        } else {
          msg.textContent = data.message || '操作失败';
        }
      } catch (e) {
        msg.textContent = '网络错误';
      }
    }
  </script>
</body>
</html>